/**
 * zhx.camera.monitor scss
 *
 * Author : Vicco Wang
 * Date : 2017.03.29 
 *   
 */
$base-color 		: #343c4a;
$base-lighten-color	: #5c636d;
$base-blue-color    : #009aff;
$base-green-color   : #449d44;
$light-green-color  : #00E676;
$base-yellow-color  : #f0ad4e;
$base-red-color     : #F44336;
$base-white-color	: #f2f2f2;
$base-gray-color	: #9E9E9E;
/**
 * 基础字体颜色
 * @type {[type]}
 */
$base-font-color : #343c4a;
/**
 * 基础 轻 字体色
 * @type {[type]}
 */
$base-light-font-color : #E0E0E0;

@mixin frame-transition($wt : all, $sec : .3s) {
	-webkit-transition: $wt $sec ease 0s;
	-moz-transition: $wt $sec ease 0s;
	transition: $wt $sec ease 0s;
}
@mixin no-select{
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
@mixin use-flex{
//  	display: box;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
@mixin flex-align-center{
	-webkit-align-items: center;
	-webkit-justify-content: center;
	align-items: center;
	justify-content: center;
}
@mixin flex-column{
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}

.zhx-camera-monitor{
	@include use-flex;
	width:100%;
	height:100%;
					
	.camera-monitor-navigation{
		width: 180px;
		flex:none;
		// background-color: lighten( $base-gray-color, 35% );
		background-color: $base-color;

      #camera-monitor-tree{
        padding:10px;

        .ztree, .ztree a{
          color : lighten( $base-gray-color,25% );

          .activeCamera{
            display: inline-block;
            width:5px;height:5px;
            background-color:$light-green-color;
            border-radius:5px;
            position:relative;
            top:-2px;
            margin-left:5px;
          }

        }

        .ztree li a.curSelectedNode{
          background-color :$base-lighten-color;
          border:none;
          color : #fff;
          border-radius:3px;
        }

        .ztree li span.button.treeLineNode_ico_open{
          margin-right:3px;
          background-size:100% !important;
          background:url("ztree_img/pos_active.png") center no-repeat;
        }
        .ztree li span.button.treeLineNode_ico_close{
          margin-right:3px;
          background-size:100% !important;
          background:url("ztree_img/pos.png") center no-repeat;
        }

        .ztree li span.button.treeBusNode_ico_open{
          margin-right:3px;
          background-size:100% !important;
          background:url("ztree_img/bus_active.png") center no-repeat;
        }
        .ztree li span.button.treeBusNode_ico_close{
          margin-right:3px;
          background-size:100% !important;
          background:url("ztree_img/bus.png") center no-repeat;
        }

        .ztree li span.button.treeCameraNode_ico_docu{
          margin-right:3px;
          background-size:100% !important;
          background:url("ztree_img/camera_gray.png") center no-repeat;
        }

      }

	}

	.camera-monitor-main{
		flex:1;
		@include use-flex;
		@include flex-column;
		background-color: $base-color;

		.camera-monitor-header{
			height:40px;
			flex:none;
			background-color : $base-lighten-color;
			@include use-flex;

			>div {
				@include use-flex;
				@include flex-align-center;
				height:100%;
				color: lighten( $base-gray-color, 20% );
				font-size:14px;

				&.line-name{
					width:80px;
					font-weight:bold;
					color : #fff;
					background-color: $base-blue-color;
				}

				&.bus-number{
					width:120px;
				}

				&.select-camera{
					flex:1;
				}

				&.time{
					width:200px;
					background-color : darken( $base-lighten-color, 10% );
				}
			}

		}

		.camera-monitor-section{
			flex:1;

			.camera-list{
				width:100%;
				height:100%;

				> div.monitor-block{
					position:relative;

					&:before{
						position:absolute;
						left:50%;top:50%;
						margin-left : -50px;
						color : darken($base-gray-color, 20%);
					}

					@for $i from 1 through 10 {
						&:nth-child(#{$i}){
							&:before{
								content: 'CAMERA #{$i}'
							}
						}
					}

					.monitor-event-mask{
						position:absolute;
						left:0;top:0;
						width:100%;height:100%;
						z-index:10;
						box-sizing: border-box;

						&.focuseBorder{
							border: 3px solid $light-green-color;
						}

					}

					.monitor-loading-mask{
						position:absolute;
						left:0;top:0;
						width:100%;height:100%;
						box-sizing: border-box;
						@include use-flex;
						@include flex-align-center;
						z-index:9;
						color : $base-gray-color;
						background-color : darken($base-color, 40%);
					}

					.camera-monitor-icon{
						position:absolute;
						opacity:.5;
						z-index:11;

						&.close-monitor{
							right:10px;
							top:10px;
							cursor:pointer;
							font-size:30px;
						}

                        &.max-size{
                            right:10px;
                            bottom:10px;
                            cursor:pointer;
                            font-size:24px;
                        }

						&.monitor-speaker{
							bottom:10px;
							left:10px;
						}
					}

					.monitor-camera-main{
						position:absolute;
						left:0;top:0;
						width:100%;height:100%;
						z-index:9;
					}

				}

				//only one monitor full display
				> div.full, 
				  &.column_layer_2 > div, 
				  &.flex_layer > div,
				  &.float_layer_3 > div, 
				  &.float_layer_6 > div, 
				  &.flex_layer_vhs > div,
				  &.flex_layer_all > div {
					width:100%;height:100%;
					color : #fff;
					box-sizing: border-box;
					border : 1px solid darken($base-gray-color, 20%);
					@include use-flex;
					@include flex-align-center;
					overflow: hidden;

				}

				//monitor 2/3 display
				&.column_layer_2{
					column-count: 2;
					column-gap : 0;

					>div {

						&.column_half_h{
							width:100%;
							height:100%;
						}

						&.column_half_v{
							width:100%;
							height:50%;
						}

					}

				}

				&.flex_layer{
					@include use-flex;
					@include flex-align-center;
					flex:1 auto;
					flex-wrap: wrap;

					>div {

						&.flex_half{
							width:50%;
							height:100%;
						}

						&.flex_vh{
							width:50%;
							height:50%;
						}

					}

				}

				&.float_layer_3{

					>div{
						float:left;
						width:50%;height:100%;
						overflow: hidden;

						&.float_small{
							width:50%;
							height:50%;
						}
					}
				}

				&.float_layer_6{

					>div{
						float : left;
						width:33.333%;height:30%;
						overflow:hidden;

						&.float_big{
							width: 66.666%;
							height: 69.8%;
							border-bottom:none;
						}

						&.float_small{
							width:33.333% ;
                          height: calc( 69.8% / 1.996 );
						}
					}
				}

				&.flex_layer_vhs{
					@include use-flex;
					flex-wrap: wrap;

					>div{
						width:33.333%;height:33.333%;
					}
				}

				&.flex_layer_all{
					@include use-flex;
					flex-wrap: wrap;

					>div{
						width:25%;height:25%;

						&:nth-child(1),&:nth-child(2){
							width:50%;height:50%;
						}
					}
				}

			}

		}

		.camera-monitor-type{
			height:40px;
			flex:none;
			background-color : $base-lighten-color;
			@include use-flex;

			ul {
				width:100%;
				@include use-flex;

				li {
					@include use-flex;
					@include flex-align-center;
					// height:100%;
					flex:1;
					cursor: pointer;

					&.active{
						background-color :  darken( $base-color, 10% );
						color : #fff;

						$renderActiveNumber : 0;

						@for $i from 1 through 7 {

							$renderActiveNumber : $i;

							@if $i == 5 {
								$renderActiveNumber : 6;
							}
							@if $i == 6 {
								$renderActiveNumber : 9;
							}
							@if $i == 7 {
								$renderActiveNumber : 10;
							}

							&:nth-child(#{$i}){
								&:before{
									content:'';
									width:24px;height:24px;
									background:url('../images/1x#{$renderActiveNumber}_active.png') no-repeat;
									background-size:100%;
								}
							}

						}

					}

					$renderNumber : 0;

					@for $i from 1 through 7 {

						$renderNumber : $i;

						@if $i == 5 {
							$renderNumber : 6;
						}
						@if $i == 6 {
							$renderNumber : 9;
						}
						@if $i == 7 {
							$renderNumber : 10;
						}

						&:nth-child(#{$i}){
							&:before{
								content:'';
								width:24px;height:24px;
								background:url('../images/1x#{$renderNumber}.png') no-repeat;
								background-size:100%;
							}
						}

					}

					
				}

			}
			

		}

	}

}


